// const BASE_URL = 'http://api-breakingnews-web.itheima.net'

myUserInfo(res => {
  if (res.data.status === 0) {
    // console.log( res );
    // console.log( res.data.data.user_pic );
    $('#image').attr('src', res.data.data.user_pic)
  }
  handleCropper()
})

function handleCropper() {
  // 初始化剪裁插件
  const image = document.getElementById('image')
  let cropper = new Cropper(image, {
    aspectRatio: 1, // 剪裁图层的纵横比例
    preview: $('.img-preview')
  })

  // 点击选择图片
  $('.select').on('click', function () {
    $('#file').click()
  })

  $('#file').on('change', function () {
    let file = this.files[0]
    let url = URL.createObjectURL(file)
    // 把url赋值给剪裁工具
    cropper.replace(url)
  })

  $('.sure').on('click', function () {
    // cropper插件转化base64
    // 格式转换
    let canvas = cropper.getCroppedCanvas({
      // 利用cropper方法。把剪裁区输出到一个canvas标签上 width和height是标签大小
      width: 100,
      height: 100
    })
    // canvas图像 => base64字符串
    let base64Str = canvas.toDataURL('image/jpeg')
    // 因为base64Str有一些特殊的符号，前端需要url编码，再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str)
    let data = `avatar=${base64Str}`

    // 上传图片，发送请求
    updateAvatar(data, res => {
      let { status, message } = res.data
      if (status === 0) {
        successMsg(message, () => {
          window.parent.getUserInfo()
        })
      } else {
        errorMsg(message)
      }
    })
  })
}
